<template>
  <div class="paramster-content">
    <Form :model="event" :label-width="80">
        <FormItem label="事件类型">
            <Select @on-change="handlerChange" v-model="event.type">
              <Option value="">无</Option>
              <Option v-for="item in eventList" :value="item.value" :key="item.value">{{item.name}}</Option>
            </Select>
        </FormItem>
        <FormItem label="测试事件" v-if="event.type">
          <Button @click="handlerTest" v-if="showTestBtn">点击运行</Button>
          <span v-else>为防止事件副作用,请测试完成后刷新页面,再编辑项目;修改触发事件后同样需要保存刷新页面后才能生效</span>
        </FormItem>

    </Form>
    <Collapse v-model="collapseValue" @on-change="handlerCollapseChange"  v-show="!!event.type">
        <Panel name="1" v-if="event.type==='custom'">
            <span>自定义脚本</span>
            <div slot="content">
                <codemirror ref="code" @input="handlerChange" v-model="event.custom" :options="cmOptions"></codemirror>
            </div>
        </Panel>
    </Collapse>
  </div>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'
import {
  Getter,
  Action
} from 'vuex-class'
import {debounce} from 'lodash'
@Component
export default class Main extends Vue {
  @Getter curElement
  @Action actChangeElement
  $refs: {
    code: any
  }
  showTestBtn=true
  event={
    type: "",
    custom: '',
    test: 0
  }
  collapseValue="1"
  eventList=[{
    value: "link",
    name: "跳转外链"
  }, {
    value: "custom",
    name: "自定义脚本"
  }
  ]
  cmOptions = {
    tabSize: 4,
    mode: 'text/javascript',
    theme: "monokai",
    lineNumbers: true,
    line: true
  }

  @Watch('curElement')
  onElementChanged ():void {
    this.event = {...this.curElement.event}
    this.event.custom = this.event.custom
  }
  handlerCollapseChange () {
    this.$refs.code.refresh()
  }
  handlerTest () {
    this.showTestBtn = false
    this.event.test = this.event.test + 1
    this._handlerChange()
  }
  _handlerChange ():void {
    this.actChangeElement({...this.curElement, event: this.event})
  }
  handlerChange :any=function () {}
  mounted ():void {
    this.onElementChanged()
    this.handlerChange = debounce(this._handlerChange, 500)
  }
}
</script>
<style lang="less" scoped>
.paramster-content{
  color: #fff;
}
</style>
